<template>
	<div class="detail">
    <div class="nav">
			<div class="nav-content">
				<div class="avtor"></div>
				<div class="userinfo">
					<div class="username">
						<span>陈倩</span>
						<div class="status">

						</div>
					</div>	
					<div class="message">
						<div>会员编号: <span>12323</span></div>
						<div>资料完善度: <span>80%</span></div>
						<div>来源: <span>加入单身群</span></div>
					</div>
				</div>
			</div>
		</div>
    <div class="main">
			<div class="main-left">
				<div class="title">基本资料</div>
				<div clas="inputBox">
					<div>
						<div>
							<div>姓名</div>
							<input type="text" placeholder="刘浪" />
						</div>
						<div></div>
					</div>
					<div></div>
					<div></div>
					<div></div>
					<div></div>
				</div>
			</div>
			<div class="main-right"></div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
.detail {
	max-width: 100vw;
	min-height: 100vh;
}
.nav {
  height: 176px;
	width: 100%;
  background-color: #E0DFDF;
	box-sizing: border-box;
	.nav-content {
		padding-left: 37px;
		padding-top: 45px;
		display: flex;
		flex-direction: row;
		.avtor {
			width: 100px;
			height: 100px;
			border-radius: 5px;
			background-color: rgba(187,187,187,1);
			margin-right: 26px;
		}
		.userinfo {
			.username {
				display: flex;
				flex-direction: row;
				align-items: center;
				margin-bottom: 24px;
				> span {
					color: rgba(0,0,0,1);
					font-size: 18px;
					align-items: center;
					text-align: left;
					font-weight: bold;
					font-family: Helvetica-bold;
				}
				.status {
					width: 317px;
					height: 51px;
					background-color: #FFFFFF;
					display: flex;
					flex-direction: row;
					align-items: center;
					margin-left: 4px;
				}
			}
			.message {
				display: flex;
				flex-direction: row;
				align-items: center;
				color: rgba(90,90,90,1);
				font-size: 16px;
				font-family: Helvetica-regular;
				>div {
					margin-right: 67px;
					>span {
						color: rgba(0,0,0,1);
					}
				}
			}
		}
	}
}
.main {
	display: flex;
	flex-direction: row;
	height: 100vh;
	width: 100vw;
	> div {
		.title {
			color: rgba(0,0,0,1);
			font-size: 16px;
			font-weight: bold;
			margin-bottom: 19px;
		}
	}
	.main-left {
		box-sizing: border-box;
		padding-top: 20px;
		padding-left: 35px;
		padding-right: 26px;
		width: 50%;
		border-right: 1px solid rgba(187,187,187,1);
	}
	.main-right {
		width: 50%;
	}
}
</style>
